<template>
    <div class="edit-popup">
        <popup
                ref="popupRef"
                title="充值余额"
                :async="true"
                width="550px"
                @confirm="handleSubmit"
                @close="handleClose"
        >
            <el-form
                    ref="formRef"
                    :model="formData"
                    :rules="rules"
            >
                <el-form-item label="充值余额" prop="recharge_price" >
                    <el-input v-model="formData.recharge_price" placeholder="请输入充值余额" />
                </el-form-item>
                <el-form-item label="充值类型" prop="type" >
                    <el-select class="w-[200px]" v-model="formData.type" clearable>
                        <template v-for="item in coupon_state">
                            <el-option :value="item.id" :label="item.name">{{item.name}}</el-option>
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item label="充值备注" prop="remark" >
                    <el-input v-model="formData.remark" :autosize="{ minRows: 4 }" type="textarea" placeholder="请输入充值备注" />
                </el-form-item>
            </el-form>
        </popup>
    </div>
</template>
<script lang="ts" setup>
    import type { FormInstance } from "element-plus";
    import { ZfbRechargeLog, ZfbRecharge } from '@/api/finance'
    import Popup from "@/components/popup/index.vue";
    const emit = defineEmits(["success", "close"]);
    const formRef = shallowRef<FormInstance>();
    const popupRef = shallowRef<InstanceType<typeof Popup>>();
    const mode = ref("add");

    const formData = reactive({
        recharge_price: '', // 充值金额
        remark: '', // 充值描述
        type:1, // 1 红包充值 2 流量充值
    });

    const rules = reactive({
        recharge_price: [{ required: true, message: '请输入充值余额', trigger: 'blur' }],
        type: [{ required: true, message: '请选择充值类型', trigger: ['blur', 'change'] }],
        remark: [{ required: true, message: '请输入充值备注', trigger: 'blur' }],
    })

    const gradeList = ref([]);

    const coupon_state = [
        {
            id: 1,
            name: '红包充值'
        },
        {
            id: 2,
            name: '流量充值'
        },
    ];


    const open = (type = "add") => {
        mode.value = type;
        popupRef.value?.open();
    };

    const setFormData = (data:any[], room_id:number) => {
        for (const key in formData) {
            if (data[key] != null && data[key] != undefined) {
                if (key === 'room_id') {
                    formData[key] = room_id
                } else {
                    formData[key] = data[key]
                }

            }
        }
    };

    const getDetail = async (room_id:string, id:string,) => {
        // const data = await detailRollCallRewardRoomMz({
        //     roll_id: id,
        // });
        // formData.roll_id = id;
        // setFormData(data.info, room_id)
    };


    const handleClose = () => {
        emit("close");
    };

    defineExpose({
        open,
        setFormData,
        getDetail,
    });
    //提交
    const handleSubmit = async () => {
        await formRef.value?.validate();
        await ZfbRecharge(formData)
        popupRef.value?.close();
        emit("success");
    };
</script>
